import React, { Component } from 'react'
import '../css/02_option_tab.css';
import Film from './films_comp/Film';
import Cinema from './films_comp/Cinema';
import Center from './films_comp/Center';
import Navbar from './films_comp/Navbar';
import TabbarFunc from './films_comp/TabbarFunc';

export default class App extends Component {
    state = {
        current: 0,
        list: [
            {
                id: 1,
                text: "电影"
            },
            {
                id: 2,
                text: "影院"
            },
            {
                id: 3,
                text: "我的"
            }
        ]
    }
    which() {
        switch (this.state.current) {
            case 0: return <Film />
            case 1: return <Cinema />
            case 2: return <Center />
            default:
                return null;
        }
    }
    render() {
        return (
            <div>
                <Navbar callback={() => {
                    this.setState({current: 2})
                }}/>
                {
                    // 函数表达式
                    this.which()
                }
                {/* 类组件 */}
                {/* <Tabbar callback={(index) => {
                    this.setState({ 
                        current: index 
                    })
                }} current = {this.state.current} list = {this.state.list} /> */}
                {/* 函数式组件 */}
                <TabbarFunc callback={(index) => {
                    this.setState({ 
                        current: index 
                    })
                }} current = {this.state.current} list = {this.state.list} />
            </div>
        )
    }
}
